<template>
    <div>
        <h2>公告列表</h2>
        <table>
            <tr>
                <td>
                       标题:<input type="text">
                       分类:<select>
                            <option value="">请选择</option>
                            <option>服务协议</option>
                       </select>
                    <button @click="chaxun">查询</button>

                    <button @click="dao">导出</button>
                </td>
            </tr>
        </table>
        <table class="table table-bordered">
            <tbody>
                <tr class="bg bg-primary">
                    <td><input type="checkbox"></td>
                    <td>id</td>
                    <td>标题</td>
                    <td>分类</td>
                    <td>图片</td>
                    <td>状态</td>
                    <td>发布时间</td>
                    <td>发布人</td>
                    <td>操作</td>
                </tr>
                <tr v-for="item in showgong">
                    <td><input type="checkbox"></td>
                    <td>{{item.id}}</td>
                    <td>{{item.biaoti}}</td>
                    <td>{{item.leixing}}</td>
                    <td>{{item.tupian}}</td>
                    <td>{{item.zhuangtai}}</td>
                    <td>{{item.stime}}</td>
                    <td>{{item.faburen}}</td>
                    <td>
                        <button @click="(item.id)">删除</button>
                        <button @click="(item.id)">修改</button>
                    </td>
                </tr>
                <tr >
                    <td><input type="checkbox"></td>
                    <td>4</td>
                    <td>少吃零食</td>
                    <td>服务协议</td>
                    <td><img src="/src/img/【裸露的肩膀】2024-08-05 19_07_41.png" width="100px"></td>
                    <td>显示</td>
                    <td>2025-1-6</td>
                    <td>老九</td>
                    <td>
                        <button @click="Del">删除</button>
                        <button @click="Update">修改</button>
                    </td>
                </tr>
            </tbody>
        </table>
        <table>
            <tr>
                <td>
                    <a @click="show('a')" href="showgong">上一页</a>
                    
                    <a  href="shewgong">下一页</a>
                    <a  href="showgong">1</a>
                    <a  href="shewgong">2</a>
                    <a @click="show('c')" href="showgong">首页</a>
                    <a @click="show('d')" href="shewgong">尾页</a>
                    共2页，当2/2页，共4条

                    
                    每页
                    <select>
                        <option>3</option>
                        <option>2</option>
                        <option>1</option>
                    </select>
                    条
                 </td>
            </tr>
        </table>
    </div>
</template>

<script setup lang="ts">
import axios from 'axios';
import { onMounted, reactive, ref, toRefs } from 'vue';
import { useRouter } from 'vue-router';
import "bootstrap/dist/css/bootstrap.min.css"
import { hrtime } from 'process';
const router=useRouter();

const showgong=ref();
const form=reactive({
    start:{
        biaoti:"",
        leixing:"",
        index:1,
        size:2
    },
    list:[],
    count:0,
    sum:0
})
const {start,list,count,sum}=toRefs(form);

const getshow=()=>{
    let obj={
        biaoti:start.value.biaoti,
        leixing:start.value.leixing,
        index:start.value.index,
        size:start.value.size,
    }
    axios.get("https://localhost:7140/api/gonggao/Showgong?Biaoti="+start.biaoti+"&Leixing="+start.leixing+"&index="+start.index+"&size="+start.size).then(res=>{
        showgong.value=res.data.data;
    })
}


const chaxun=()=>{
    router.push("")
}


const dao=()=>{
    router.push("/src/img/新建 XLSX 工作表.xlsx")
}

onMounted(res=>{
    getshow();
})

</script>

<style scoped>

</style>